<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
  <title>客户管理</title>
  <link rel="icon" href="/static/images/favicon.ico" type="image/ico">
  <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
  <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
  <meta name="author" content="yinqi">
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  <link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="/static/css/animate.css" rel="stylesheet">
  <link href="/static/css/style.min.css" rel="stylesheet">
  <link href="/static/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
  <!--对话框-->
  <link rel="stylesheet" href="/static/js/jconfirm/jquery-confirm.min.css">
</head>

<body>
<input class="hidden" type="text" th:value="${#httpServletRequest.getAttribute('cName')}" id="c_name">
<div class="container-fluid p-t-15">

  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header"><h4>客户管理</h4></div>
        <div class="card-body">

          <div id="toolbar" class="toolbar-btn-action">
            <button id="btn_delete" type="button" class="btn btn-danger">
              <span class="mdi mdi-window-close" aria-hidden="true"></span>批量删除
            </button>
          </div>
          <table id="table"></table>

        </div>
      </div>
    </div>

  </div>

</div>

<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

<!--行内编辑插件-->
<link href="/static/js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css" rel="stylesheet">
<script type="text/javascript"
        src="/static/js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script type="text/javascript"
        src="/static/js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>

<script type="text/javascript" src="/static/js/main.min.js"></script>
<!--对话框-->
<script src="/static/js/jconfirm/jquery-confirm.min.js"></script>
<script src="/static/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/static/js/lightyear.js"></script>
<script src="/static/js/mycommons.js"></script>
<script type="text/javascript">
  $('#table').bootstrapTable({
    classes: 'table table-bordered table-hover table-striped',
    url: '/customer',
    method: 'get',
    dataType: 'json',
    uniqueId: 'id',
    idField: 'id',             // 每行的唯一标识字段
    toolbar: '#toolbar',       // 工具按钮容器
    //clickToSelect: true,     // 是否启用点击选中行
    showColumns: true,         // 是否显示所有的列
    showRefresh: true,         // 是否显示刷新按钮
    cache: false, //不使用缓存，默认true

    //showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)

    pagination: true,                    // 是否显示分页
    paginationLoop: false,                // 禁用分页循环
    paginationSuccessivelySize: 5,        // 连续的最大连续页数
    paginationPagesBySide: 1,
    sortName: 'id',
    sortOrder: "asc",                    // 排序方式
    queryParams: function (params) {
      let search
      let c_name = $("#c_name").val()
      if (c_name !== undefined && c_name !== '') {
        search = c_name
      } else {
        search = params.search
      }
      let param = {
        limit: params.limit,         // 每页数据量
        page: (params.offset / params.limit) + 1, //查询页码
        search: search,        // 搜索内容
        sort: params.sort,
        order: params.order
      };
      return param;
    },                                   // 传递参数
    sidePagination: "server",            // 分页方式：client客户端分页，server服务端分页
    pageNumber: 1,                       // 初始化加载第一页，默认第一页
    pageSize: 5,                        // 每页的记录行数
    pageList: [5, 6, 7, 8, 9, 10],      // 可供选择的每页的行数
    search: true,                      // 是否显示表格搜索，此搜索是客户端搜索
    searchHighlight: true,          // 搜索高亮
    searchOnEnterKey: true,         //按 Enter 键搜索

    //showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
    //exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据

    columns: [{
      checkbox: true    // 是否显示复选框
    }, {
      field: 'id',
      title: '#',
      sortable: true    // 是否排序
    }, {
      field: 'name',
      title: '客户姓名',
      editable: {
        type: 'text',
        title: '客户姓名',
        send: 'always'
      }
    }, {
      field: 'phone',
      title: '联系方式',
      editable: {
        type: 'text',
        title: '联系方式',
        send: 'always'
      }
    }, {
      field: 'operate',
      title: '操作',
      formatter: btnGroup,  // 自定义方法
      events: {
        'click .edit-btn': function (event, value, row, index) {
          editUser(row.id);
        },
        'click .del-btn': function (event, value, row, index) {
          tb_deleteOne(row.id, "/customer")
        },
        'click .show-btn': function (event, value, row, index) {
          showUser(row);
        }
      }
    }],
    onEditableSave: function (field, row, oldValue, $el) {
      $.ajax({
        url: '/customer',
        type: 'PUT',
        dataType: 'json',
        data: row,
        success: function (res) {
          $('#table').bootstrapTable('updateRow', {index: row.id, row: row})
          if (res.flag) {
            msgNotify(res.msg, 'success', 1500)
          } else {
            msgNotify(res.msg, 'danger', 1500)
          }
        },
        error: function () {
          msgNotify("编辑失败", 'danger', 1500)
        }
      })
    },
    onLoadSuccess: function (data) {
      $("[data-toggle='tooltip']").tooltip();
    }
  });

  // 操作方法 - 编辑
  function editUser() {

  }

  // 操作方法 - 查看
  function showUser() {
  }

  /*
  批量删除
   */
  tb_deleteBatch("/customer")

</script>

</body>
</html>